<template>
  <div class="home">
    <div class="bottom">
        <div class="phone">
            <input class="select" type="text" :placeholder="$t('placeholder.phone')" v-model="tel">
        </div>
        <div class="btn">
            <button class="button" @click="queryClick(tel)">{{$t('placeholder.query')}}</button>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tel: ""
    };
  },
  methods: {
    queryClick(tel) {
      if (this.tel == "" || isNaN(this.tel)) {
        // this.$Toast("请输入手机号");
        this.$Toast(this.$t("tips.phone"));
        return false;
      } else {
        this.$router.push({ path: `/queryList/${tel}` });
      }
    }
    //
  }
};
</script>
<style lang="scss" scoped>
.ignore {
  border-bottom: 1px solid black;
}
.home {
  width: 100%;
  // height: 100vh;
  display: flex;
  flex-flow: column;

  .bottom {
    flex: 1;
    width: 100%;
    position: relative;
    // top: 53px;
    img {
      width: 100%;
      height: auto;
    }
    ul {
      font-size: 22px;
      li {
        height: 38.8px;
        line-height: 38.8px;
        list-style-type: none;

        position: relative;
        left: -24px;
        top: -6px;
        a {
          text-decoration: none;
          color: black;
        }
      }
    }
    .phone {
      // height: 130px;
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      .select {
        width: 280px;
        height: 38.4px;
        border: 1px solid #333;
        color: #333;
        font-size: 14px;
        padding: 0 10px;
        border-radius: 0px;
      }
    }
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 25px;
      .button {
        color: #fff;
        background: #4799d0;
        border-radius: 0px;
        width: 150px;
        height: 38.4px;
        border: 0;
        font-size: 15px;
      }
    }
  }
}
</style>

